<template>
   <ul class="wrap">                
      <li v-if="openTime">开奖时间：{{formatOpenTime}}</li>             
      <li v-if="condition">互动条件：{{condition}}</li>               
      <li v-if="scope">抽奖范围：{{scope}}</li>
      <li v-if="winnerCount">抽取人数：{{winnerCount}}名</li>
    </ul>  
</template>

<script>
import { reactive, toRefs, computed } from 'vue'
import { dateFormat } from '@/utils'
export default {
    name: 'LotteryCondition',
    props: {
      prizes: {
        type: Object
      }
    },
    setup(props) {
      const params = reactive({
        hasPrizes: computed(() => !!props.prizes),
        openTime: computed(() => props.prizes?.lottery_time ?? 0),
        condition: computed(() => {
          let data = ''
          if (params.hasPrizes) {
              const prize = props.prizes
              data += (prize.lottery_feed_limit === 1 ? '关注我、' : '')
              data += (prize.business_type === 9 ? '在本评论区发布评论' : '转发本动态')
              data += (prize.lottery_at_num > 0 ? `并@${prize.lottery_at_num}位好友` : '')
          }
          return data
        }),
        scope: computed(() => {
          let data = ''
          if (params.hasPrizes) {
              const prize = props.prizes
              data += (prize.lottery_feed_limit === 1 ? '仅粉丝' : '所有用户')
          }
          return data
        }),
        winnerCount: computed(() => {
          let data = 0
          if (params.hasPrizes) {
              const prize = props.prizes
              data = prize.first_prize + prize.second_prize + prize.third_prize
          }
          return data
        }),
        formatOpenTime: computed(() => {
          return params.openTime ? dateFormat(new Date(params.openTime*1000), 'yyyy年MM月dd日 hh:mm') : ''
        })
      })
      return {
        ...toRefs(params)
      }
    }    
}
</script>

<style lang="scss" scoped>
  .wrap{
    padding: 10px;
    color: #757575;
    @include border1px(#e7e7e7, 0 0 1px 0);
    li {
        font-size: 13px;
        padding-bottom: 10px;
        &:last-child {
            padding-bottom: 0;
        }        
    }
}
</style>